<template>
	<view class="create">
		<uv-navbar title="我的发布" autoBack placeholder bgColor="linear-gradient(to bottom, #EAA8AD, #F4D1D1)" />
		<view class="tabs">
			<tui-tabs :tabs="tabsList" :currentTab="active" @change="tabsAction" itemWidth="33.333%"
				selectedColor="#D12D26" sliderBgColor="#D12D26"></tui-tabs>
			<uv-line />
		</view>
		<view class="content">
			<!-- 使用小程序兼容的方式 -->
			<itemPage1 v-if="active === 0" :list="list" @refresh="handRefresh" />
			<itemPage2 v-if="active === 1" :list="list" @refresh="handRefresh" />
			<itemPage3 v-if="active === 2" :list="list" @refresh="handRefresh" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		onUnmounted,
		onBeforeUnmount,
		watch

	} from 'vue';
	import {
		getInvitation,
		getTopic,
		getActivity
	} from '@/api'
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		toStrictBoolean
	} from '@/util/tools'
	import {
		useRefreshStore
	} from '@/store'
	import {
		onShow
	} from '@dcloudio/uni-app';

	// import itemPage1 from './components/item1.vue'
	// import itemPage2 from './components/item2.vue'
	// import itemPage3 from './components/item3.vue'

	const isSticky = ref(false);
	const refreshStore = useRefreshStore()
	const active = ref(0)
	const isReload = ref(false)
	const keyword = ref('')
	const page = ref(1)
	const list = ref([])
	const total = ref(0)
	const changeTabIndex = ref(0)
	const finished = ref(false)
	const color_red = uni.$config.color.red
	const color_black = uni.$config.color.black
	const windowHeight = ref(0)
	const tabsList = ref([{
		name: '话题'
	}, {
		name: '活动'
	}, {
		name: '互动'
	}])

	// 计算当前应该显示的组件
	const currentTabComponent = computed(() => {
		const components = [itemPage1, itemPage2, itemPage3]
		return components[active.value]
	})

	const handleScroll = () => {
		isSticky.value = window.scrollY > 100;
	};


	const handRefresh = async (dataType) => {
		page.value = 1;
		list.value = [];
		await getList();
	}

	onMounted(() => {
		window.addEventListener('scroll', handleScroll);
	});

	onShow(async () => {
		if (refreshStore.shouldRefresh) {
			active.value = refreshStore.refreshParams?.active
			refreshStore.resetRefresh()
		}
		await tabsAction()
	});



	onBeforeUnmount(() => {
		refreshStore.resetRefresh()
	})

	onUnmounted(() => {
		window.removeEventListener('scroll', handleScroll);
	});

	// 获取窗口高度
	uni.getSystemInfo({
		success: function(res) {
			windowHeight.value = res.windowHeight - 180;
		}
	});

	const tabsAction = async (eg = null) => {
		page.value = 1;
		if (eg) {
			active.value = eg.index;
		}
		list.value = [];
		await getList();
	}

	const onSearch = async (val) => {
		console.log('--onSearch-val---', val)
		list.value = [];
		page.value = 1;
		await getList();
	}

	const getList = async () => {
		finished.value = false;
		let param = {
			page: page.value,
			limit: 10,
		};
		if (page.value === 1) list.value = []
		let result
		if (active.value == 0) {
			result = await getTopic(param)
		} else if (active.value == 1) {
			result = await getActivity(param)
		} else {
			result = await getInvitation(param)
		}
		console.log('-list-result--', result)
		page.value++
		total.value = result.result.total
		list.value = [...list.value, ...result.result.data]

	}

	const toRoute = (url) => uni.navigateTo({
		url
	})

	onReachBottom(() => {
		if (finished.value) return
		getList()
	})

	const init = async () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		await getList()
		uni.hideLoading()
	}

	init()
</script>

<style>
	page {
		background-color: #F6F4F7;
	}
</style>

<style lang="scss" scoped>
	.create {
		:deep(.uv-status-bar) {
			background-image: none !important;
			background-color: #EAA8AD !important;
		}

		.tabs {
			position: sticky;
			top: var(--window-top);
			background-color: #ffffff;
		}

		.content {
			padding: 0 30rpx;
		}
	}
</style>